<!-- 整改认证 abarbeitung -->
<template>
  <div class="container-abarbeitung">
    <van-nav-bar title="沟通管理详情" left-arrow border @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="delete" slot="right" v-if="isDelete" />
    </van-nav-bar>
    <div class="content">
      <template>
        <div class="abarbeitung-type flex-between item-s">
          <div class="abarbeitung-type-l flex">
            <div class="abarbeitung-type-l-name text-font-have">主题：</div>
            <div
              class="abarbeitung-type-l-v"
              :class="[form.Subject?'text-font-have':'text-font-none']"
            >{{form.Subject}}</div>
          </div>
        </div>

        <div class="abarbeitung-type flex-between item-s">
          <div class="abarbeitung-type-l flex">
            <div class="abarbeitung-type-l-name text-font-have">类型：</div>
            <div
              class="abarbeitung-type-l-v"
              :class="[form.ComType?'text-font-have':'text-font-none']"
            >{{form.ComType}}</div>
          </div>
        </div>

        <div class="abarbeitung-type flex-between item-s">
          <div class="abarbeitung-type-l flex">
            <div class="abarbeitung-type-l-name text-font-have">描述：</div>
            <div
              class="abarbeitung-type-l-v"
              :class="[form.Description?'text-font-have':'text-font-none']"
            >{{form.Description}}</div>
          </div>
        </div>

        <div class="project-title flex">工程部位</div>
        <div class="project-content">
          <div class="abarbeitung-type flex-between item-s">
            <div class="abarbeitung-type-l flex">
              <div class="abarbeitung-type-l-name text-font-have">楼栋：</div>
              <div
                class="abarbeitung-type-l-v"
                :class="[form.BuildName?'text-font-have':'text-font-none']"
              >{{form.BuildName?form.BuildName:'暂无信息'}}</div>
            </div>
          </div>

          <div class="abarbeitung-type flex-between item-s">
            <div class="abarbeitung-type-l flex">
              <div class="abarbeitung-type-l-name text-font-have">楼层：</div>
              <div
                class="abarbeitung-type-l-v"
                :class="[form.Floor?'text-font-have':'text-font-none']"
              >{{form.Floor?form.Floor:'暂无信息'}}</div>
            </div>
          </div>

          <div class="abarbeitung-type flex-between item-s">
            <div class="abarbeitung-type-l flex">
              <div class="abarbeitung-type-l-name text-font-have">构件名称：</div>
              <div
                class="abarbeitung-type-l-v"
                :class="[form.ElementName?'text-font-have':'text-font-none']"
              >{{form.ElementName?form.ElementName:'暂无信息'}}</div>
            </div>
          </div>

          <div class="abarbeitung-type flex-between item-s">
            <div class="abarbeitung-type-l flex">
              <div class="abarbeitung-type-l-name text-font-have">专业：</div>
              <div
                class="abarbeitung-type-l-v"
                :class="[form.Specialty?'text-font-have':'text-font-none']"
              >{{form.Specialty?form.Specialty:'暂无信息'}}</div>
            </div>
          </div>
        </div>

        <div class="project-title flex">上传凭证</div>
        <div v-if="PhotoList.length" class="uploader flex">
          <div class="van-uploader" v-for="(item,index) in PhotoList" :key="index">
            <img :src="item">
          </div>
        </div>
        <div v-else class="uploader flex">
          <div class="van-uploader" >
            无图片
            <!-- <img :src="item"> -->
          </div>
        </div>

        <div class="project-title flex">工作流程</div>
        <div class="flow-content">
          <div class="flow-content-item" v-for="(item,index) in listFlow" :key="index">
            <div class="flow-content-item-l flex-row" :class="[item.Status === 4?'action-b':'action-a']">
              {{index+1}}
              <div
                class="line"
                :class="[(item.Status===4 && item.listAuthPhoto.length) || index === 0 ? 'line-b':'line-a']"
                v-if="index !== listFlow.length-1"
              ></div>
            </div>

            <div class="flow-content-item-c">
              <div class="flow-content-item-c-w flex">
                <div class="flex1 flex-row flow-content-item-border">{{item.PersonName}}</div>
                <div class="flow-content-item-c-l flex-row flow-content-item-border">{{item.OrgName}}</div>
                <div class="flex1 flex-row">{{item.DeptName}}</div>
              </div>
              <div class="flow-content-item-c-triangle">
                <div class="flow-content-item-c-triangle-b"></div>
              </div>
              <div class="flow-content-item-c-pic flex-row">
                <template v-if="item.listAuthPhoto.length">
                  <img :src="fileURL + item.listAuthPhoto[0].Url">
                </template>
                <template v-else-if="index === 0">
                  <img v-show="PhotoList.length" :src="PhotoList[0]">
                  <div v-show="!PhotoList.length" class="van-uploader" >
                      无图片
                      <!-- <img :src="item"> -->
                    </div>
                </template>
                <template v-else-if="item.Status == WorkStatus&& item.Status == 3">
                  <div v-if="listAuthPhoto.length === 0" class="pic-warp flex-row" @click="selectPhoto">
                    <img src="./user_assets/imgs/up-proof.png">
                  </div>
                  <div v-else class=" flex-row" @click="cancelPhoto">
                    <img :src="listAuthPhoto[0]">
                  </div>
                </template>
              </div>
            </div>

            <div class="flow-content-item-r"></div>
          </div>
        </div>
      </template>
      <div v-if="isMe" class="btn-warp">
        <div v-show="WorkStatus === 0 && routeFlag">
          <van-button class="btn" square type="primary" block @click="onPrimary(2)">
            拒收
          </van-button>
          <van-button class="btn" square type="primary" block @click="onPrimary(1)">
            接收
          </van-button>
        </div>

        <div v-show="WorkStatus === 3 && routeFlag" >
          <van-button class="oneBtn" square type="primary" block @click="onPrimary(3)">
            认证
          </van-button>
        </div>
      </div>

    </div>
     <!-- <van-actionsheet
      v-model="phone_show"
    >
      <van-uploader capture="camera" :after-read="onRead" accept="image/*" @oversize="oversize" :max-size="8388608" class="upload-file-item">
        <div>
          拍摄
        </div>
      </van-uploader>
      <van-uploader :after-read="onRead" accept="image/*" @oversize="oversize" :max-size="8388608" class="upload-file-item">
        <div>
          从手机相册选择
        </div>
      </van-uploader>
      <div class="upload-file-item cancel" @click="uploadCancel">
        取消
      </div>
    </van-actionsheet> -->
    <van-actionsheet
     v-model="phone_show"
     :actions="phoneActions"
     cancel-text="取消"
     @select="onPicSelect"
     @cancel="phone_show = false"
    />
  </div>
</template>

<script type='textecmascript-6'>
import {GetDetail,DoWork,UploadBase64Img,RemoveMyPublish} from '@/api/api.js'
import Camera from '@/common/Camera/Camera.js'
export default {
  mixins: [Camera],
  data() {
    return {
      // 单选
      //   isRadio: "1",
      // radio 图标
      phoneActions: [
        {
          id: 0,
          name: '拍照'
        },
        {
          id: 1,
          name: '从手机相册选择'
        }
      ],
      radioIcon: {
        normal: require("./user_assets/imgs/radio-a.png"),
        active: require("./user_assets/imgs/radio-b.png")
      },
      //   日常巡检
      // 主题
      rc_themeValue: "A1地下室未清底",
      // 问题类型
      rc_issueValue: "基础施工",
      // 发起人
      rc_startValue: "李三四",
      // 发起时间
      rc_startDateValue: "2018.01.01",
      // 描述
      rc_describeValue: "a1栋地下室存在较大砂砾，基坑底部不平整",
      // 接收人
      rc_receiveValue: "李三四；王五",
      // 整改截止时间
      rc_rectifyValue: "2018.01.01",
      // 照片
      rc_voucherData: [
        require("./user_assets/imgs/user-portrait.png"),
        require("./user_assets/imgs/browseMode-big.png")
      ],

      //   工程变更数据
      // 编码
      codeValue: "20190322001",
      // 主题
      themeValue: "某某变更文字",
      // 类型
      typeValue: "某某变更类型",
      // 楼栋
      buildingValue: "1栋",
      // 楼层
      levelValue: "2层",
      // 构件
      drivenValue: "构件名称",
      // 专业
      majorValue: "某某专业",
      // 详细位置
      positionValue: "某某详细位置描述",
      // 发起时间
      startDateValue: "2018-01-01",
      // 发起人
      startPersonValue: "张三",
      // 变更内容
      changeContentValue: "某某变更内容文字描述",
      // 凭证
      voucherData: [
        require("./user_assets/imgs/user-portrait.png"),
        require("./user_assets/imgs/browseMode-big.png")
      ],
      // 物料清单数据
      buyThingTable: [
        {
          name: "c20混凝土",
          building: "A1",
          level: "1F",
          befor: "10000.00m³",
          after: "678.21m³",
          difference: "678.21m³"
        },
        {
          name: "c20混凝土",
          building: "A2",
          level: "2F",
          befor: "10000.00m³",
          after: "678.21m³",
          difference: "678.21m³"
        },
        {
          name: "门",
          building: "A3",
          level: "1F",
          befor: "15扇",
          after: "10扇",
          difference: "10扇"
        },
        {
          name: "门",
          building: "A4",
          level: "3F",
          befor: "15扇",
          after: "10扇",
          difference: "10扇"
        }
      ],
      // 流程数据
      flowData: [
        {
          id: 1,
          name: "王海洋",
          unit: "建设单位",
          department: "工程部",
          done: true,
          img: require("./user_assets/imgs/browseMode-big.png")
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: true
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: false
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: false
        }
      ],

      //   沟通管理数据

      // 主题
      gt_themeValue: "某某变更文字",
      // 类型
      gt_typeValue: "某某变更类型",
      // 描述
      gt_describeValue: "某某描述文字某某描述文字某某描述文字某某描述文字",
      // 楼栋
      gt_buildingValue: "1栋",
      // 楼层
      gt_levelValue: "2层",
      // 构件
      gt_drivenValue: "构件名称",
      // 专业
      gt_majorValue: "某某专业",
      // 凭证
      gt_voucherData: [
        require("./user_assets/imgs/user-portrait.png"),
        require("./user_assets/imgs/browseMode-big.png")
      ],
      // 流程数据
      gt_flowData: [
        {
          id: 1,
          name: "王海洋",
          unit: "建设单位",
          department: "工程部",
          done: true,
          img: "./user_assets/imgs/browseMode-big.png"
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: true
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: false
        },
        {
          id: 1,
          name: "某某某",
          unit: "建设单位",
          department: "工程部",
          done: false
        }
      ],
      communicateId: null, // 沟通项ID
      flowActive: 0,  //流程在哪一步
      WorkStatus: 2 ,  // 0 待接收， 3 进行中 4 完成
      WorkFlowId: '',
      projectId: localStorage.getItem('projectid'),  //项目Id
      userID: localStorage.getItem('userId'), //用户ID
      isMe: true,  //判断是否是本人
      par: {
        Priority: "",
        OrgId: "",
        DepId: "",
        Person: "",
        Status: 1
      },
      form: {},
      PhotoList: [], //图片详情
      listFlow: [], //工作流
      routeFlag: true,  //从集成管理跳转过来，待定
      screenHeight: null,  //屏幕高度
      phone_show: false,
      listAuthPhoto: [], //上传认证凭证
      fileURL: '',  //头配置文件路径
      uploading: false,
      isDelete: false
    };
  },
  created(){
    console.log(config)
    this.fileURL = config.fileUrl
    this.screenHeight = window.screen.height;
    this.getCommunicatItem()
  },
  methods: {
    onClickLeft() {
      this.$router.push({path: '/communicateDetail'});
    },
    // 确认
    onPrimary(flag) {
      console.log("确认");
       if (flag == 1) {
        // this.load();
        let val = Object.assign(this.par, {
          listAuthPhoto: [],
          Status: 3
        });
        DoWork(val).then(res => {
          // this.$toast.clear();
          if (res.StatusCode == 200) {
            // this.$emit("close");
            this.$message({
              type: "success",
              message: "处理成功！",
              center: "true"
            });
            this.$router.go(-1);
          }
        });
      }
      if (flag == 2) {
        // this.load();
        let val = Object.assign(this.par, {
          listAuthPhoto: [],
          Status: 2
        });
        DoWork(val).then(res => {
          // this.$toast.clear();
          if (res.StatusCode == 200) {
            // this.$emit("close");
            this.$message({
              type: "success",
              message: "处理成功！",
              center: "true"
            });
            this.$router.go(-1);
          }
        });
      }
      //认证
      if(flag == 3){
        let objList = []
        // objList.push({
        //   Url: this.photoURL
        // })
        let val = Object.assign(this.par, {
          listAuthPhoto: this.listAuthPhoto,
          Status: 4
        });
        DoWork(val).then(res => {
          // this.$toast.clear();
          if (res.StatusCode == 200) {
            // this.$emit("close");
            this.$message({
              type: "success",
              message: "处理成功！",
              center: "true"
            });
            this.$router.go(-1);
          } else {
            this.$message({
              type: "error",
              message: res.Message,
              center: "true"
            });
            this.$router.go(-1);
          }
        });
      }
    },
    //获取照片
     selectPhoto(){
      if(!this.phone_show){
        this.phone_show = true
      }else {
        this.phone_show = false
      }
    },
    uploadCancel(){
      this.phone_show = false
    },
    onPicSelect(item){
      switch(item.id){
        case 0:
          {
            this.uploading = true
            this.captureImage().then(res=>{
              console.log(res)
              this.listAuthPhoto = res
            })
            this.uploading = false;
          }
          break;
        case 1:
          {
          this.uploading = true;
            this.gettingAlbums().then(res => {
              this.listAuthPhoto = res;
            })
            this.uploading = false;
          }
          break;
        default:
          break;
      }
    },
      // 上传图片
    // async onRead(file, detail) {
    //   console.log(file);
    //   console.log(detail);
    //   let params = {
    //     Base64Photo: file.content,
    //     fileext: file.file.name
    //   }
    //   let res = await this.Request(UploadBase64Img(params))
    //   console.log(res)
    //   if(res.StatusCode === 200){
    //     this.listAuthPhoto= [res.Detiel[0].TokenUrL +res.Detiel[0].smallPhotoURL]
    //     this.photoURL = res.Detiel[0].URL
    //     console.log(this.listAuthPhoto)
    //     this.phone_show = false
    //   }else {
    //     this.$message({
    //       type: 'error',
    //       message: res.Message,
    //       center: 'true'
    //     })
    //   }
    // },
    /**
     * @name 文件大小超过限制时触发
     * @param {Object} file 文件解析后的 file 对象
     */
    oversize(file){
      console.log(file)
      this.$toast({
        message: "文件大小不要超过1M",
        className: "my-toast"
      });
    },
    //删除照片
    cancelPhoto(index){
      this.$dialog.confirm({
        title: '删除确认',
        message: '确认删除照片？',
        className: 'delecet_photo'
      }).then(() => {
        // on confirm
        this.listAuthPhoto = []
      }).catch(() => {
        // on cancel

      });
      
    },
     //获取沟通具体项
    getCommunicatItem(){
      this.communicateId = this.$route.query.id
      console.log(this.communicateId)
      this.GetCommunicationDetail()
    },
    /**
     * api接口
     */
    //获取沟通管理详情
    async GetCommunicationDetail(){
      let id = this.communicateId, that = this
      if(id){
        let Com_Detail = await that.Request(GetDetail({communicateId: id}))
        console.log(Com_Detail)
        if(Com_Detail.StatusCode === 200){
           that.flowActive = 0;
           Com_Detail.Detiel[0].listFlow.forEach((item)=>{
             if(item.listAuthPhoto.length){
               item.listAuthPhoto.forEach((i)=>{
                 let arr = i.Url.split('.')
                 arr[arr.length - 2] += '_s'
                 i.Url = arr.join('.')
               })
             }
             if(item.ID === Com_Detail.Detiel[0].Communicate.CurrentStepIndex){
              that.WorkStatus = item.Status
             }
           })
          Com_Detail.Detiel[0].listFlow.forEach((el, index)=>{
            if (that.userID == el.Person) {
                that.isDelete = true;
            }
            if (that.flowActive == 0 && el.ID == Com_Detail.Detiel[0].Communicate.CurrentStepIndex) {
              if(that.WorkStatus !== 4){
                that.flowActive = index;
              }else {
                that.flowActive = index +1    // 和所有的步骤不相等 表示取消闪烁
              }
              // this.Person = el.Person;
              that.WorkFlowId = el.ID;
              if (that.userID == el.Person) {
                that.isMe = true;
              } else {
                that.isMe = false;
              }
              that.par = {
                Priority: el.Priority,
                OrgId: el.OrgId,
                DepId: el.DepId,
                Person: el.Person,
                ID: el.ID
              };
            }
          })
          //  this.data = res.Result;
          that.form = Com_Detail.Detiel[0].Communicate
          console.log(that.form)
          // this.getRelation()
         
          that.PhotoList = Com_Detail.Detiel[0].PhotoList
          that.listFlow = Com_Detail.Detiel[0].listFlow 

        }else{
          that.$message({
            type: 'error',
            message: Com_Detail.Message,
            center: 'true'
          })
        }
      }

    },
    /**
     * 删除操作
     * @param {integer} type 类型：1.变更 2.采购 3.沟通 4.风险
     * @param {integer} ID
     */
    onClickRight(){
      this.$dialog.confirm({
        title: '',
        message: '是否确定删除？'
      }).then(() => {
        this.Request(RemoveMyPublish({ID: Number(this.$route.query.id), type: 3})).then(data => {
          if (data.StatusCode === 200) {
            this.$toast({
              type: 'success',
              message: '删除成功！',
              className: "my-toast"
            })
            this.$router.push({path: '/communicateDetail'});
          }else{
            this.$toast({
              type: 'fail',
              message: data.message ? data.message : '后台异常',
              className: "my-toast"
            })
          }
        })
      })
    }
  }
};
</script>
<style >
.container-abarbeitung .p15 .van-cell .van-cell__title {
  max-width: 1.7rem;
}
.container-abarbeitung .van-nav-bar {
  position: fixed;
  left: 0;
  top: 0;
  /* padding-top: 40px; */
  width: 100%;
}
.container-abarbeitung .content {
  margin-top: 88px;
}
.container-abarbeitung .van-nav-bar .van-nav-bar__title {
 
  height: 88px;
}

/* 表格样式更改 */
.container-abarbeitung .materials_table .el-table .cell {
  height: 0.78rem;
  line-height: 0.78rem;
  font-size: 30px;
}
.container-abarbeitung .materials_table .el-table .table_input {
  border: 0.04rem solid #eeeeee;
}
.container-abarbeitung .materials_table_largin .el-table .cell {
  height: 0.78rem;
  line-height: 0.78rem;
  font-size: 30px;
}
.container-abarbeitung .materials_table_largin .el-table .table_input {
  border: 0.04rem solid #eeeeee;
}
.container-abarbeitung .materials_table_largin {
  width: 100%;
  overflow: scroll;
}
</style>

<style lang='stylus' scoped rel='stylesheet/stylus'>
@import './user_assets/base.css';

.mt20 {
  margin-top: 0.27rem;
}

.container-abarbeitung {
  width: 100%;
  height: 100%;
  background: rgba(246, 248, 250, 1);

  .m20 {
    margin: 0 0.32rem;
  }

  .p15 {
    padding: 0.4rem 0.32rem !important;
  }

  .btn-warp {
    
    margin-top: 50px;
    padding: 0.4rem 0.32rem;
    background: rgba(246, 248, 250, 1);
    >div{
      display: flex;
      justify-content: space-between;
      .btn {
        width:330px;
        height:88px;
        border-radius:4px;
      }
      .oneBtn{
        width: 100%
        height: 88px
        border-radius:4px;
        background:rgba(90,147,255,1)
      }
      .btn:first-child {
        background:rgba(229,75,75,1);
      }
      .btn:last-child {
        background:rgba(90,147,255,1)
      }
    }
   
  }

  .group-warp {
    padding: 0 0.32rem;

    .item-s-b {
      height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      border-bottom: 0.017rem solid #E5E5E5;
    }
  }

  .content {
    background-color: #fff;

    .abarbeitung-content-radio {
      margin: 0 0.32rem;
      border-bottom: 0.017rem solid #e5e5e5;
      height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);

      .abarbeitung-content-radio-l {
        width: 1.2rem;
      }

      .abarbeitung-content-radio-r {
        flex: 1;
      }

      .van-radio {
        overflow: visible;
        flex: 1;
        display: flex;
        justify-content: center;

        .van-radio__icon {
          img {
            width: 30px;
            height: 30px;
            display: block;
          }
        }
      }
    }

    .flow-content {
      padding: 0 0.32rem;
      padding-bottom: 40px;
      background: rgba(246, 248, 250, 1);

      .flow-content-item {
        padding-top: 0.4rem;
        display: flex;

        .action-a {
          background: rgba(221, 221, 221, 1);
        }

        .action-b {
          background: rgba(90, 147, 255, 1);
        }

        .flow-content-item-l {
          width: 0.53rem;
          height: 0.53rem;
          border-radius: 50%;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          position: relative;
          margin-right: 0.55rem;
          margin-top: 0.33rem;

          .line {
            position: absolute;
            width: 0.05rem;
            background-color: #979797;
            top: 0.64rem;
            left: 0.23rem;
          }

          .line-a {
            height: 0.83rem;
          }

          .line-b {
            height: 4.5rem;
          }
        }

        .flow-content-item-c {
          flex: 1;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0.0133rem 0.11rem 0px rgba(220, 226, 237, 1);
          border-radius: 0.0532rem;
          position: relative;

          .flow-content-item-c-w {
            height: 1.18rem;
          }

          .flow-content-item-c-pic {
            padding-bottom: 0.27rem;

            .van-uploader{ 
            width: 6.69rem;
            height: 3.86rem;
            background: rgba(255, 255, 255, 1);
            border: 0.027rem solid rgba(189, 193, 198, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            color: #666
            }
            .pic-warp {
              width: 6.69rem;
              height: 3.86rem;
              background: rgba(238, 238, 238, 1);

              img {
                width: 0.67rem;
                height: 0.67rem;
                display: block;
              }
            }

            img {
              width: 6.69rem;
              height: 3.86rem;
              border: 0.027rem solid rgba(189, 193, 198, 1);
              display: block;
            }
          }

          .flow-content-item-c-triangle {
            top: 0;
            left: -0.3rem;
            position: absolute;
            height: 1.18rem;
            width: 0.3rem;
            overflow: hidden;

            .flow-content-item-c-triangle-b {
              position: absolute;
              transform: rotate(45deg) !important;
              -ms-transform: rotate(45deg) !important;
              -moz-transform: rotate(45deg) !important;
              -webkit-transform: rotate(45deg) !important;
              -o-transform: rotate(45deg) !important;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 1px 4px 0px rgba(220, 226, 237, 1);
              height: 0.4rem;
              width: 0.4rem;
              top: 0.39rem;
              left: 0.15rem;
            }
          }
          .flex1 {
            width: 25%
          }
          .flow-content-item-c-l {
            flex: 1;
          }

          .flow-content-item-border {
            border-right: 0.03rem dashed #979797;
          }
        }

        .flow-content-item-r {
          margin-left: 1.06rem;
        }
      }
    }

    .van-cell {
      padding: 0;
    }

    .uploader {
      background-color: rgba(246, 248, 250, 1);
      padding: 0 0.32rem;

      .van-uploader {
        width: 2.66rem;
        height: 2.66rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 0.11rem;
        border: 0.027rem solid rgba(189, 193, 198, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.266rem;
        overflow: hidden;
        color: #666

        img {
          width: 2.66rem;
          height: 2.66rem;
          display: block;
        }
      }

      .uploader-tip {
        font-size: 26px;
        font-family: SourceHanSansCN-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        align-self: flex-end;
        margin-left: 0.16rem;
      }
    }

    .abarbeitung-type-l-name {
      width: 2rem;
    }

    .abarbeitung-type-arrow img {
      width: 0.24rem;
      height: 0.43rem;
      display: block;
    }

    .flow-work {
      font-size: 26px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      height: 2.13rem;
      background: rgba(255, 255, 255, 1);
      padding: 0 0.32rem;

      img {
        width: 0.8rem;
        height: 0.76rem;
        display: block;
        margin-bottom: 0.16rem;
      }
    }

    .van-button--primary {
      height: 1.18rem;
      background: rgba(90, 147, 255, 1);
      border-radius: 0.15rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .item-s {
      height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      border-bottom: 0.017rem solid #E5E5E5;
      margin: 0 0.32rem;
    }

    .project-title {
      font-size: 30px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      height: 1.18rem;
      padding: 0 0.32rem;
      background-color: rgba(246, 248, 250, 1);
    }

    .project-title-r {
      height: 1.18rem;
      font-size: 30px;
      font-family: SourceHanSansCN-Regular;
      font-weight: 400;
      color: rgba(90, 146, 255, 1);
      line-height: 1.18rem;
    }

    .project-content {
      background-color: #fff;
    }
  }

  .text-font-have {
    font-size: 30px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .text-font-none {
    font-size: 30px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .van-popup .van-actionsheet__item {
    height: 1.18rem !important;
    line-height: 1.18rem !important;
    font-size: 30px;
  }
 .upload-file-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 88px;
    font-size: 32px;
    color: #333;
  }
  .cancel {
    color: #666!important;
  }
}
</style>
